/**
 * Copyright (c) 2017-present, Liu Jinyong
 * All rights reserved.
 *
 * https://github.com/huanxsd/MeiTuan  
 * @flow
 */
import React, { PureComponent } from 'react'
import { View, Text, StyleSheet, TextInput, ScrollView, Button, TouchableOpacity, ListView, Image } from 'react-native'
import { screen, system } from '../common'
import { color} from '../widget'
type Props = {
    size: any,
    captchaType: any,
}

type state = {
    expression: string,
    validate: string,
    validateInput: string,
}

class Amazeuivercode extends PureComponent<Props> {
    constructor(props: Object) {
        super(props)
        this.state = {
            expression: '',
            validate: '',
            validateInput: '',
        }
    }
    renderCode = () => {
        //定义expression和result，expression是字符串，result可能是字符串也可能是数字
        let expression = '', result;
        //判断验证码类型    
        if (this.props.captchaType == 'Calculation') {
            result = 0;//计算类型则result为数字，初始化为0
            //获取随机的两个两位数
            let Calpre = Math.round(Math.random() * 100);
            let Calafter = Math.round(Math.random() * 100);

            let codeCal = ['-', '+', 'x'];//运算符
            let i = Math.round(Math.random() * 2);//获得随机运算符

            switch (codeCal[i]) {//判断运算符并计算
                case '-':
                    expression = Calpre + '-' + Calafter;
                    result = Calpre - Calafter;
                    break;
                case '+':
                    expression = Calpre + '+' + Calafter;
                    result = Calpre + Calafter;
                    break;
                case 'x':
                    expression = Calpre + 'x' + Calafter;
                    result = Calpre * Calafter;
                    break;
            }
        } else if (this.props.captchaType == 'Normal') {
            result = '';
            let codeNormal = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';//字母库
            for (let i = 0; i < this.props.size; i++) {
                result = result + codeNormal[Math.round(Math.random() * (codeNormal.length - 1))];
            }//随机获取字母四个

            expression = result.toLowerCase();//忽略大小写
           
        }

        this.setState({//设置更新状态
            expression: expression,
            validate: result
        });
    }
    componentDidMount = () => {
       // let size = this.props.size;
       // alert(size);
        this.renderCode();
    }
   
    duigou=()=>{
        let validateResult=this.state.validateResult;
        if(validateResult){
            return (
                <Text>成功</Text>
            )
        }else {
            return (
                <Text>失败</Text> 
            )
        }

    }
    validate = () => { 
        let  thisInput =  this.state.validateInput;
        let  validateCode = this.state.validate;
        if (thisInput.toLowerCase() == validateCode.toString().toLowerCase()) {
           this.setState({
            validateInput: thisInput, 
            validateResult:true
           })
        } else {
            this.setState({
                validateInput: thisInput, 
                validateResult:false
         })
        }

       
      }  
   
    render() {
        
        return (
            <View  style={styles.viewContainer}>
                <TextInput  style={styles.textInputStyle}
                    placeholder="请输入验证码" multiline={false}
                    underlineColorAndroid='transparent'
                    onChangeText={(validateInput)=>{this.setState({validateInput:validateInput})}} 
                    value={this.state.validateInput}
                    onSubmitEditing={this.validate}>
                    
                </TextInput> 
                {this.duigou()}
                <TouchableOpacity onPress={this.renderCode}>
                
                    <Text style={styles.textStyle}>
                    {this.state.expression}
                    </Text> 
                </TouchableOpacity>   
                 
            </View>
        )
    }
}

const styles = StyleSheet.create({
    viewContainer:{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
    },
   
    textStyle: {
        borderWidth: screen.onePixel,
        backgroundColor:color.primary,
        width: screen.width / 6,
        textAlign:"center",
        borderRadius:30,
        fontSize: 12,
      
    },
    textInputStyle:{
        width: screen.width / 5,
        textAlign:"center",
        fontSize: 12,
    }
})


export default Amazeuivercode
